<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">
		<z-paging
			ref="paging"
			v-model="dataList"
			@query="queryList"
			:fixed="false"
			:auto="false"
			auto-show-back-to-top
			empty-view-text="暂无订单"
		>
			<view class="handleList">
				<view
					class="order-item flex flex_clm justify-start" 
					@tap="ToOrderDetail(item)"
					v-for="item in dataList"
					:key="item.id"
				>
					<view class="order-item_top flex justify-btw align-center">
						<text>订单编号：{{ item.orderNum || '--' }}</text>
						<text>{{
							tabList.map(i=>i.val.includes(item.status)).name
						}}</text>
					</view>
					<view class="order-item_center">
						<view class="order-item_center_content flex justify-btw align-center">
							<text>项目名称：{{ item.name || '--' }}</text>
							<text> <text class="moneyIcon">￥</text> {{ item.price }}</text>
						</view>
					</view>
					<view class="order-item_bottom flex justify-btw align-center">
						<view class="">
							<text>{{
								item.status==1 ? '待付首款'
								: (item.status==3 || item.status==4 || item.status==5) ? '已付首款'
								: item.status==6 ? '待付尾款'
								: item.status==7 ? '总计付款'
								:''
							}}</text>
							<text>￥{{
								(item.status==1 || item.status==3 || item.status==4 || item.status==5) ? item.startPrice
								: item.status==6 ? item.endPrice
								: item.status==7 ? item.price
								:''
							}}</text>
						</view>
						<view
							class="payBtn flex justify-center align-center"
							v-if="item.status==1 || item.status==6"
						>去付款</view>
						<view v-else-if="item.status==7" class="flex justify-end align-center">
							<!-- <view
								class="dBtn flex justify-center align-center"
								style="background-color: #fff; color:#3B8CDC;"
							>下载附件</view> -->
							<view
								class="payBtn flex justify-center align-center"
								style="background-color: #fff; color:#3B8CDC;"
								@tap.stop="copyLink(item.protocol)"
							>下载链接</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
			dataList: [],
			status: '',
			firstLoaded: false,
			tabList: [
				{name: '全部', val:[] }, 
				{name: '待付首款', val:['1'] },
				{name: '设计中', val:['3', '4', '5'] },
				{name: '待付尾款', val:['6'] },
				{name: '已完成', val:['7'] },
			]
		};
	},
	props: {
		//当前组件的index，也就是当前组件是swiper中的第几个
		tabIndex: {
			type: Number,
			default: function() {
				return 0;
			}
		},
		//当前swiper切换到第几个index
		currentIndex: {
			type: Number,
			default: function() {
				return 0;
			}
		}
	},
	watch: {
		currentIndex: {
			handler(newVal) {
				if (newVal === this.tabIndex) {
					//懒加载，当滑动到当前的item时，才去加载
					if (!this.firstLoaded) {
						setTimeout(() => {
							this.$refs.paging.reload();
						}, 50);
					}
				}
			},
			immediate: true
		}
	},
	methods: {
		queryList(pageNo, pageSize) {
			if (this.tabIndex == 0) {
				this.status = 0;
			} else if (this.tabIndex == 1) {
				this.status = 1;
			} else if (this.tabIndex == 2) {
				this.status = 2;
			} else if (this.tabIndex == 3) {
				this.status = 3;
			}
			let parmas = {
				pageNo: pageNo,
				pageSize: pageSize,
				statusList: this.tabList[Number(this.currentIndex)].val
			};
			console.log(parmas);
			// 获取列表数据
			this.api
				.orderList(parmas)
				.then(res => {
					console.log(res);
					//将请求的结果数组传递给z-paging
					res.data.data.records = res.data?.data?.records.map(a => {
						return {
							...a,
							dateOperation:a.dateOperation ? a.dateOperation.split(' ')[0] : ''
						}
					})
					this.$refs.paging.complete(res.data.data.records);
					this.firstLoaded = true;
				})
				.catch(res => {
					this.$refs.paging.complete(false);
				});
		},
		
		copyLink(link){
			if(!link){
				this.tui.toast('下载链接为空')
				return
			}
			uni.setClipboardData({
				data: link,
				showToast: false,
				success: ()=>{
					this.tui.toast("您已成功复制下载链接，建议在电脑端打开")
				}
			});
		},

		// to订单详情
		ToOrderDetail(item) {
			uni.navigateTo({
				url: '/pages/order/orderDetail?id=' + item.id
			});
		}
	}
};
</script>

<style lang="scss">
/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
.order-item{
	background-color: #fff;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	&>view{
		box-sizing: border-box;
		padding: 0 24rpx;
	}
	&_top{
		line-height: 96rpx;
		border-bottom: 1rpx solid #D1D1D1;
		&>text:first-child{ @include str(28rpx, bold, #333) }
		&>text:last-child{ @include str(28rpx, bold, $uni-color-primary) }
	}
	&_center{

		&_content{
			box-sizing: border-box;
			line-height: 96rpx;
			padding: 0 24rpx;
			margin-top: 24rpx;
			margin-bottom: 2rpx;
			border-radius: 10rpx;
			background-color: $uni-bg-color-grey;
			&>text:first-child { @include str(28rpx, bold, #333) }
			&>text:last-child { @include str(34rpx, bold, #333) }
			.moneyIcon{
				@include str(24rpx, bold, #333) 
			}
		}
	}
	&_bottom{
		line-height: 104rpx;
		&>view>text:first-child{ @include str(28rpx, bold, #333) }
		&>view>text:last-child{ @include str(30rpx, bold, #f00) }
		.payBtn{
			width: 172rpx;
			height: 56rpx;
			border-radius: 28rpx;
			box-sizing: border-box;
			border: 2rpx solid $uni-color-primary;
			background-color: $uni-color-primary;
			color: #fff;
		}
		.dBtn{
			width: 152rpx;
			height: 56rpx;
			border-radius: 28rpx;
			@include str(28rpx, 500, #fff);
			background-color: $uni-color-primary;
			color: #fff;
			border: 2rpx solid $uni-color-primary;
		}
	}
}
.content {
	height: 100%;
	.handleList {
		margin-top: 10rpx;
		width: calc(100% - 40rpx);
		margin-left: 20rpx;
		.list {
			width: 100%;
			margin-top: 24rpx;
			background-color: #fff;
			box-shadow: 0rpx 6rpx 28rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
			.l1 {
				padding: 22rpx 24rpx;
				text:nth-child(1) {
					@include str(30rpx, 500, #999);
				}
				.color1 {
					color: #0ec7d9;
				}
				.color2 {
					color: #333333;
				}
				.color3 {
					color: #999;
				}
				.color4{
					color: #FF2B2B;
				}
			}
			.line{
				width: 100%;
				border-top: 1px solid #CCCCCC;
			}
			.l2{
				padding: 24rpx;
				image{
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
				}
				._l2{
					width: calc(100% - 188rpx);
					margin-left: 28rpx;
					text:nth-child(1){
						@include str(30rpx, bold, #333);
					}
					text:nth-child(2){
						@include str(28rpx, 500, #999);
						margin-top: 12rpx;
					}
					.price{
						margin-top: 22rpx;
						text:nth-child(1){
							@include str(30rpx, 500, #999);
						}
						text:nth-child(2){
							@include str(28rpx, bold, #333);
						}
					}
				}
			}
			.l3{
				padding: 0 24rpx 24rpx 24rpx;
				._l3{
					text:nth-child(1){
						@include str(28rpx, bold, #333);
					}
					text:nth-child(2){
						@include str(36rpx, bold, #333);
					}
					text:nth-child(3){
						@include str(28rpx, bold, #FF2B2B);
					}
				}
				._l4{
					.btn1{
						display: inline-block;
						@include str(28rpx, 500, #666);
						padding: 6rpx 16rpx;
						border-radius: 25rpx;
						border: 1px solid #666666;
						margin-right: 20rpx;
					}
					.btn2{
						display: inline-block;
						@include str(28rpx, 500, #fff);
						padding: 6rpx 16rpx;
						background: rgba(14,199,217,1);
						border-radius: 25rpx;
						border: 1px solid #0EC7D9;
					}
				}
			}
		}
	}
}
</style>
